<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小娱媒体首页-Demo展示，桃子同学的个人空间</title>
    <link rel="icon" href="/public/images/index/about/favicon.ico" >
    <link rel="stylesheet" href="//cdn.bootcss.com/Swiper/3.2.7/css/swiper.min.css">
    <link rel="stylesheet" href="/public/styles/base.css">
    <style>
        html,body{overflow: hidden;height: 100%;font-size: 16px;}

        .loading{background: #01A4E8;width: 100%;height: 100%;}
        .ball-spin-fade-loader {position: absolute; width: 0; height: 0; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
        .ball-spin-fade-loader > div:nth-child(1) {top: 25px;left: 0;animation: ball-spin-fade-loader 1s 0s infinite linear; }
        .ball-spin-fade-loader > div:nth-child(2) {top: 17.04545px;left: 17.04545px;animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
        .ball-spin-fade-loader > div:nth-child(3) {top: 0;left: 25px;animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
        .ball-spin-fade-loader > div:nth-child(4) {top: -17.04545px;left: 17.04545px;animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
        .ball-spin-fade-loader > div:nth-child(5) {top: -25px;left: 0;animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
        .ball-spin-fade-loader > div:nth-child(6) {top: -17.04545px;left: -17.04545px;animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
        .ball-spin-fade-loader > div:nth-child(7) { top: 0;left: -25px;animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
        .ball-spin-fade-loader > div:nth-child(8) {top: 17.04545px;left: -17.04545px;animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
        .ball-spin-fade-loader > div {background-color: #fff;width: 15px;height: 15px;border-radius: 100%;margin: 2px;animation-fill-mode: both;position: absolute; }
        @keyframes ball-spin-fade-loader {50% {opacity: 0.3;transform: scale(0.4);} 100% {opacity: 1;transform: scale(1);}}

        .outer{height: 100%;opacity: 0;transition: opacity .3s ;}
        .swiper-pagination-bullet{position: relative;background: #b2b2b2;opacity: 1;width:6px;height: 6px;margin: 12px auto !important;line-height: 16px; font-size: 12px; color: #fff;}
        .swiper-pagination-bullet-active{width: 31px; height: 16px; border-radius: 8px;}
        .swiper-pagination > span:nth-child(1):after{content: "小";opacity: 0;}
        .swiper-pagination > span:nth-child(2):after{content: "娱";opacity: 0;}
        .swiper-pagination > span:nth-child(3):after{content: "媒";opacity: 0;}
        .swiper-pagination > span:nth-child(4):after{content: "体";opacity: 0;}
        .swiper-pagination-bullet-active:after{opacity: 1 !important;transition: opacity .5s;}

        h2,h3,h4,h5,h6{text-align: center;color:#fff;}
        h2{font-size: 3.8rem;font-weight: bold;}
        h3{font-size: 2.8rem;}
        h4{font-size: 2.5rem;}
        h5{font-size: 1.45rem;}

        /*版块1*/
        .section-one h2{margin-top: -5.8%;opacity: 0;}
        .section-one h4{margin-top:2.2%;opacity: 0;}
        .section-one{background: url(/public/images/index/demo/demo_05/1.jpg) no-repeat 50% 0;width: 100%;height: 100%;position: relative;overflow: hidden;}
        .nav-box{overflow: auto;max-width:990px;margin: 0 auto;padding: 30px 5px 0;}
        .nav-logo{float: left;background: url(/public/images/index/demo/demo_05/logo.png);width: 147px;height: 40px;vertical-align: middle}
        .nav-list{float: right;color:#fff;vertical-align: middle}
        .nav-list li{float: left;margin: 10px 14px;cursor: pointer;font-size: 14px;}
        .nav-list li:hover,.nav-list li.active{color: #00d2d6;}
        .net-box{width: 75%; position: absolute; bottom: -20%; left: 0; right: 0; margin: 0 auto; max-width: 1450px; min-width: 320px;opacity: 0;}
        .net-bg{width: 100%;}
        .net-ico{position: absolute;opacity: 0;transform: scale(0);}
        .net-ico-one{left: 14.6%; top: 48.1%; width: 3.75%;}
        .net-ico-two{left: 27.5%; top: 19%; width: 4.9%;}
        .net-ico-three{left: 55.5%; top: 11.8%; width: 3.44%;}
        .net-ico-four{left: 55%; top: 66%; width: 8.55%;}
        .net-ico-five{left: 82.4%; top: 45.8%; width: 5.7%;}
        /*版块1激活*/
        .section-one.active h2{margin-top:5%;opacity: 1;transition-duration:1s;transition-property:margin,opacity; }
        .section-one.active h4{opacity: 1;transition: opacity 1s;}
        .section-one.active .net-box{bottom : -4.5%;opacity: 1;transition: all 1s ;}
        .section-one.active .net-ico{opacity: 1;transform: scale(1);transition: all 1s;}
        .section-one.active .net-ico-one{transition-delay: 1s;}
        .section-one.active .net-ico-two{transition-delay: 1.4s;}
        .section-one.active .net-ico-three{transition-delay: 1.2s;}
        .section-one.active .net-ico-four{transition-delay: 1.4s;}
        .section-one.active .net-ico-five{transition-delay: 1.4s;}
        /*版块2*/
        .section-two{overflow: hidden}
        .section-two h3{color:#3F3E3E;margin-top: 7%;position: relative;z-index: 2;opacity: 0;transform: scale(0.3);}
        .section-two h5{color:#3F3E3E;margin-top: 1.46%;position: relative;z-index: 2;opacity: 0;transform: scale(0.3);}
        .ad-plus-box{position: absolute; left: 0; right: 0; margin: auto; bottom: 8%; width: 27.61%; height: 0; padding-bottom: 27.61%;color:#0ca4f8;}
        .ad-plus-bg{border-radius: 100%;width: 59.43%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
            height: 0; padding-bottom: 59.43%; text-align: center; border: 2px solid #d0eeff;z-index: 2;opacity: 0;transform: scale(0);}
        .ad-plus-bg-inner{margin-top: 19%;}
        .ad-plus-bg-inner img{width: 74.6%;}
        .ad-plus-bg-inner span{font-size: 1.3rem; text-align: center; display: inline-block; margin-top: 3px; width: 42%; height: 0; padding-bottom: 18.1%; overflow: hidden;}
        .ad-plus-circle{background: #fff; border: 2px solid #0ca4f8; width: calc(100% - 4px); height: 0; position: relative; border-radius: 50%; padding-bottom: calc(100% - 4px);}
        .ad-plus-circle .rect{ position: absolute; background: #fff; }
        .ad-plus-circle .top{width: 100%; height: 16%; left: -2px; top: -2px; }
        .ad-plus-circle .right{width: 16%; height: 100%; right: -2px; top: -2px; }
        .ad-plus-circle .bottom{width: 100%; height: 16%; right: -2px; bottom: -2px;}
        .ad-plus-circle .left{width: 16%; height: 100%;left: -2px; bottom: -2px;}
        .ad-plus-ico{background: #0ca4f8; width: 16.83%; position: absolute; height: 16.83%; border-radius: 100%; text-align: center; border: 8px solid #fff;opacity: 0;}
        .ad-plus-ico:after{content: "";width: 0;height: 100%;vertical-align: middle;display: inline-block}
        .ad-plus-ico img{vertical-align: middle;width: 56.49%;margin-left: 8%;}
        .ad-plus-ico .text{position: absolute; width: 160px;top: 35%;font-size: 1rem;}
        .ad-plus-circle .top-ico{left: -5%; top: 5%;}
        .ad-plus-circle .top-ico .text{ left: -170px;text-align: right}
        .ad-plus-circle .right-ico{right: -5%; top: 5%; }
        .ad-plus-circle .right-ico .text{ right: -170px;text-align: left}
        .ad-plus-circle .bottom-ico{right: -5%; bottom: 5%; }
        .ad-plus-circle .bottom-ico .text{ right: -170px;text-align: left}
        .ad-plus-circle .left-ico{left: -5%; bottom: 5%; }
        .ad-plus-circle .left-ico .text{ left: -170px;text-align: right}
        /*版块2激活*/
        .section-two.active .ad-plus-bg{opacity: 1;transform: scale(1);transition: all 1s;}
        .section-two.active .ad-plus-circle .rect{transition: all 3s 1s; padding: 2px;}
        .section-two.active .ad-plus-circle .top{left:100%;}
        .section-two.active .ad-plus-circle .right{top:100%;}
        .section-two.active .ad-plus-circle .bottom{right:100%;}
        .section-two.active .ad-plus-circle .left{bottom:100%;}
        .section-two.active .ad-plus-ico{opacity: 1;transition: all 1.2s 2.7s;}
        .section-two.active .ad-plus-circle .top-ico{left: 3%;}
        .section-two.active .ad-plus-circle .right-ico{right: 3%;}
        .section-two.active .ad-plus-circle .bottom-ico{right: 3%;}
        .section-two.active .ad-plus-circle .left-ico{left: 3%;}
        .section-two.active h3{opacity: 1;transform: scale(1);transition-duration: 1s; transition-property: opacity,transform;}
        .section-two.active h5{opacity: 1;transform: scale(1);transition-duration: 1s; transition-property: opacity,transform;}
        /*版块3*/
        .section-three{background:#2b2b2b;width: 100%;height: 100%;position: relative;color:#fff;}
        .section-three h3{margin-top: 7%;opacity: 0;transform: scale(0.3);}
        .tree-view-box{position: absolute; left: 0; right: 0; margin: auto; bottom: 8%; width: 49.69%;  height: 0;padding-bottom: 28.1%;}
        .tree-view-left{position: absolute; width: 50%; height: 100%; top: 0; bottom: 0;left: 0;overflow: hidden}
        .tree-view-right{position: absolute; width: 50%; height: 100%; top: 0; bottom: 0;right: 0;overflow: hidden}
        .tree-view-root{text-align: center; width: 29.64%; height: 30.28%; position: absolute; top: 0; bottom: 0; margin: auto;z-index: 3;opacity:0;transform:scale(0);}
        .tree-view-root span{z-index: 2; position: relative; display: inline-block; margin-top: -23px; top: 50%;vertical-align: middle;font-size: 1rem;}
        .tree-view-root img{position: absolute;top:0;left:0;width: 100%;}
        .tree-view-branch{background-image: url(/public/images/index/demo/demo_05/3_02.png); background-size: 100%; width: 21.6%; height: 21.71%; position: absolute; right: 18.4%; z-index: 3;text-align: center;transition: all 1s;}
        .tree-view-branch:hover{transform:rotate(720deg) !important;}
        .tree-view-branch span{z-index: 2; position: relative; display: inline-block; margin-top: -23px; top: 50%;vertical-align: middle;font-size: 0.875rem;}
        .tree-view-branch.two{top:39.1%}
        .tree-view-branch.three{top:77.7%;}
        .tree-view-circle {width: 89.1%; height: 0; box-sizing: border-box; border: 1px solid #47565f; border-radius: 100%; padding-bottom: calc(89.1% - 2px); position: absolute; left: 14%; top: 10.4%;}
        .tree-view-line {width: 34%; height: 1px; position: absolute; top: 50%; left: 29%; background: #47565f;}
        .tree-view-cover{width: 100%;height: 100%;position: absolute;left:0;top:0;background: #2b2b2b;z-index: 2;}
        .tree-view-right .tree-view-root{right: 0}
        .tree-view-right .tree-view-branch{right: auto;left:18.4%;}
        .tree-view-right .tree-view-circle{left:auto;right:14%;}
        .tree-view-right .tree-view-line {right: 29%; left:auto;}
        .tree-view-right .tree-view-cover {right: 0; left:auto;}
        /*版块3激活*/
        .section-three.active h3{opacity: 1;transform: scale(1);transition-property: opacity,transform;transition-duration: 1s;}
        .section-three.active .tree-view-root{opacity:1;transform:scale(1);transition: all 1s;}
        .section-three.active .tree-view-branch{transform:rotate(360deg);}
        .section-three.active .tree-view-left .tree-view-cover{left: 60%;transition: all 1s 1.2s;}
        .section-three.active .tree-view-right .tree-view-cover{right: 60%;transition: all 1s 1.2s;}
        /*版块4*/
        .section-four{background:#11aa59;width: 100%;height: 100%;}
        .section-four h3{opacity: 0;margin-top: 0;}
        .section-four h5{text-align: left;padding-bottom: 4px;position: relative}
        .section-four h5.first{margin-top: 30%}
        .section-four h5 i{background: #6ac796; position: absolute; bottom: -7px; width: 0; height: 4px; left: 0;}
        .media-resource{position: absolute; left: 0; right: 0; margin: auto; bottom: 8%; width: 55.06%; height: 0; padding-bottom: 28.5%;}
        .media-resource-left{width: 35.9%; height: 100%; position: absolute;left: 0;color:#fff;}
        .media-resource-left p{margin: 10px 0 34.6%; line-height: 1.4rem;opacity: 0;font-size: 1rem;}
        .media-resource-right{width: 64.1%; height: 100%; position: absolute;right: 0}
        .small-circle{width: 3.69%; height: 4.57%; background: #e8a43c; border: 3px solid #e5fff1; border-radius: 100%; position: absolute;opacity: 0}
        .small-circle.one{left: 8%; top: 48%;}
        .small-circle.two{right: 0;top: 43%;}
        .media-resource-img{position: absolute;border-radius: 100%;background-size: 100%;}
        .media-resource-img span{color:#02572a;position: absolute;font-size: 1.12rem;}
        .media-resource-img.one{background-image: url(/public/images/index/demo/demo_05/4_01.png); width: 28.77%; height: 35.63%; top: 4.4%; left: 7%;opacity:0;}
        .media-resource-img.one span{right: -36px; top: -21px;}
        .media-resource-img.two{background-image: url(/public/images/index/demo/demo_05/4_02.png); width: 34.8%; height: 43%; right: 35%; top: 28%;opacity:0;}
        .media-resource-img.three{background-image: url(/public/images/index/demo/demo_05/4_03.png); width: 24.2%; height: 29.8%; left: 15%; bottom: 5%;opacity:0;}
        .media-resource-img.three span{left: -36px; bottom: -21px;}
        .media-resource-img.four{background-image: url(/public/images/index/demo/demo_05/4_04.png); width: 20.7%; height: 25.6%; top: 8%; right: 15%;opacity:0;}
        .media-resource-img.four span{left: -62px; top: -13px;}
        .media-resource-img.five{background-image: url(/public/images/index/demo/demo_05/4_05.png); width: 22.4%; height: 27.7%; right: 9%; bottom: 21%;opacity:0;}
        .media-resource-img.five span{left: -36px; bottom: -21px;}
        /*版块4激活*/
        .section-four.active h3{margin-top: 7%;opacity: 1;transition-property: margin,opacity;transition-duration:1s;}
        .section-four.active h5 i{width: 100%;transition: width .8s linear;}
        .section-four.active p{opacity: 1;transition:opacity 2s .8s ;}
        .section-four.active .small-circle{opacity:1;transition: opacity 1s 1s;}
        .section-four.active .media-resource-img{opacity:1;transition: opacity 1s 1s;}
        @media screen and (max-width: 1380px){
            html{font-size: 13px;}
        }
        @media screen and (max-width: 960px){
            html{font-size: 9px;}
        }
        @media screen and (max-width: 640px){
            html{font-size: 5px;}
        }
    </style>
</head>
<body>
<div class="loading">
    <div class="loader-inner ball-spin-fade-loader">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div class="outer swiper-container-vertical">
    <div class="swiper-wrapper">
        <div class="swiper-slide section-one">
            <div class="nav-box">
                <div class="nav-logo"></div>
                <ul class="nav-list">
                    <li class="active">首页</li>
                    <li>平台介绍</li>
                    <li>媒体资源</li>
                    <li>广告资源</li>
                    <li>合作伙伴</li>
                    <li>关于我们</li>
                </ul>
            </div>
            <h2>基于WiFi大数据的精准营销平台</h2>
            <h4>小娱XCloud大数据挖掘分析，WiFi场景化广告营销专家</h4>
            <div class="net-box">
                <img src="/public/images/index/demo/demo_05/1_06.png" alt="" class="net-bg">
                <img src="/public/images/index/demo/demo_05/1_01.png" alt="" class="net-ico net-ico-one">
                <img src="/public/images/index/demo/demo_05/1_02.png" alt="" class="net-ico net-ico-two">
                <img src="/public/images/index/demo/demo_05/1_03.png" alt="" class="net-ico net-ico-three">
                <img src="/public/images/index/demo/demo_05/1_04.png" alt="" class="net-ico net-ico-four">
                <img src="/public/images/index/demo/demo_05/1_05.png" alt="" class="net-ico net-ico-five">
            </div>
        </div>
        <div class="swiper-slide section-two">
            <h3>小娱ADPlus云增值平台</h3>
            <h5>小娱ADPlus，包括小娱DSP、小娱SSP、小娱WiFi服务、合作代理</h5>
            <div class="ad-plus-box">
                <div class="ad-plus-bg">
                    <div class="ad-plus-bg-inner">
                        <img src="/public/images/index/demo/demo_05/2_01.png" alt="">
                        <span>小娱ADPlus云增值平台</span>
                    </div>
                </div>
                <div class="ad-plus-circle">
                    <span class="rect top"></span>
                    <span class="rect right"></span>
                    <span class="rect bottom"></span>
                    <span class="rect left"></span>
                    <div class="ad-plus-ico top-ico">
                        <img src="/public/images/index/demo/demo_05/2_02.png" alt="">
                        <span class="text">小娱DSP广告需求平台</span>
                    </div>
                    <div class="ad-plus-ico right-ico">
                        <img src="/public/images/index/demo/demo_05/2_03.png" alt="">
                        <span class="text">小娱SSP广告供应平台</span>
                    </div>
                    <div class="ad-plus-ico bottom-ico">
                        <img src="/public/images/index/demo/demo_05/2_05.png" alt="">
                        <span class="text">合作代理</span>
                    </div>
                    <div class="ad-plus-ico left-ico">
                        <img src="/public/images/index/demo/demo_05/2_04.png" alt="">
                        <span class="text">小娱WiFi服务</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide section-three">
            <h3>移动互联网时代的云增值</h3>
            <div class="tree-view-box">
                <div class="tree-view-left">
                    <div class="tree-view-root"><img src="/public/images/index/demo/demo_05/3_01.png" alt=""><span>媒体资源</span></div>
                    <div class="tree-view-branch one"><span>计费WiFi</span></div>
                    <div class="tree-view-branch two"><span>免费WiFi</span></div>
                    <div class="tree-view-branch three"><span>产品矩阵</span></div>
                    <div class="tree-view-circle"></div>
                    <div class="tree-view-line"></div>
                    <div class="tree-view-cover"></div>
                </div>
                <div class="tree-view-right">
                    <div class="tree-view-root"><img src="/public/images/index/demo/demo_05/3_01.png" alt=""><span>广告资源</span></div>
                    <div class="tree-view-branch one"><span>移动APP</span></div>
                    <div class="tree-view-branch two"><span>网盟合作</span></div>
                    <div class="tree-view-branch three"><span>垂直类网站</span></div>
                    <div class="tree-view-circle"></div>
                    <div class="tree-view-line"></div>
                    <div class="tree-view-cover"></div>
                </div>
            </div>
        </div>
        <div class="swiper-slide section-four">
            <h3>全网优质媒体资源</h3>
            <div class="media-resource">
                <div class="media-resource-left">
                    <h5 class="first"><span>海量WiFi资源覆盖</span><i></i></h5>
                    <p>日均亿级PV，覆盖全国主流互联网受众</p>
                    <h5><span>独享特色WiFi媒体资源</span><i></i></h5>
                    <p>小娱计费WiFi：蓝领工厂、出租屋、公寓、地下室</br>
                    小娱免费WiFi：网吧、商户、家庭、高校、驾校、美妆美发店、电影院</p>
                </div>
                <div class="media-resource-right">
                    <div class="small-circle one"></div>
                    <div class="small-circle two"></div>
                    <div class="media-resource-img one"><span>母婴人群</span></div>
                    <div class="media-resource-img two"></div>
                    <div class="media-resource-img three"><span>年轻白领</span></div>
                    <div class="media-resource-img four"><span>高端人群</span></div>
                    <div class="media-resource-img five"><span>时尚女性</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-pagination">
    </div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="/public/scripts/base.js"></script>
<script src="//cdn.bootcss.com/Swiper/3.2.7/js/swiper.jquery.min.js"></script>
<script>
    function load(){
        $(window).load(function(){
            $(".loading").hide();
            $(".section-one").addClass("active");
            new Swiper('.outer', {
                pagination: '.swiper-pagination',
                direction: 'vertical',
                slidesPerView: 1,
                paginationClickable: true,
                spaceBetween: 30,
                mousewheelControl: true,
                onSlideChangeEnd: function(e){
                    $(".swiper-slide").removeClass("active").eq(e.activeIndex).addClass("active");
                }
            });
        });
    }
    //统一执行入口
    $(function(){
        load();
    })
</script>
</body>
</html>